<!DOCTYPE html>
<html>
<head>
  <title><%= name %></title>
  <link rel="stylesheet" href="http://d2v52k3cl9vedd.cloudfront.net/blk/0.0.14/blk.min.css">
</head>
<body>


<div class="flex flex-wrap py3">
  <% primaryColors.forEach(function(color) { %>
    <% color.combinations.forEach(function(combo) { %>
      <div class="h6 flex-auto p2" style="color:<%= color.hex %>;background-color:<%= combo.hex %>">
        <div class="h4 bold"><%= combo.contrast.toFixed(2) %></div>
        <div>
          <%= color.hex %>
        </div>
        <% if (combo.accessibility.aaa || combo.accessibility.aa || combo.accessibility.aaLarge) { %>
          <div class="h6 inline-block px1 rounded"
            style="color:<%= combo.hex %>;background-color:<%= color.hex %>">
            <% if (combo.accessibility.aaa) { %>
              AAA
            <% } else if (combo.accessibility.aa) { %>
              AA
            <% } else if (combo.accessibility.aaLarge) { %>
              Large
            <% } %>
          </div>
        <% } else { %>
          <div class="h6">Fail</div>
        <% } %>
      </div>
    <% }) %>
  <% }) %>
</div>


<div class="flex flex-wrap py3">
  <% bassColors.forEach(function(color) { %>
    <% color.combinations.forEach(function(combo) { %>
      <div class="h6 flex-auto p2" style="color:<%= color.hex %>;background-color:<%= combo.hex %>">
        <div class="h4 bold"><%= combo.contrast.toFixed(2) %></div>
        <div>
          <%= color.hex %>
        </div>
        <% if (combo.accessibility.aaa || combo.accessibility.aa || combo.accessibility.aaLarge) { %>
          <div class="h6 inline-block px1 rounded"
            style="color:<%= combo.hex %>;background-color:<%= color.hex %>">
            <% if (combo.accessibility.aaa) { %>
              AAA
            <% } else if (combo.accessibility.aa) { %>
              AA
            <% } else if (combo.accessibility.aaLarge) { %>
              Large
            <% } %>
          </div>
        <% } else { %>
          <div class="h6">Fail</div>
        <% } %>
      </div>
    <% }) %>
  <% }) %>
</div>


<div class="flex flex-wrap py3">
  <% bassdockColors.forEach(function(color) { %>
    <% color.combinations.forEach(function(combo) { %>
      <div class="h6 flex-auto p2" style="color:<%= color.hex %>;background-color:<%= combo.hex %>">
        <div class="h4 bold"><%= combo.contrast.toFixed(2) %></div>
        <div>
          <%= color.hex %>
        </div>
        <% if (combo.accessibility.aaa || combo.accessibility.aa || combo.accessibility.aaLarge) { %>
          <div class="h6 inline-block px1 rounded"
            style="color:<%= combo.hex %>;background-color:<%= color.hex %>">
            <% if (combo.accessibility.aaa) { %>
              AAA
            <% } else if (combo.accessibility.aa) { %>
              AA
            <% } else if (combo.accessibility.aaLarge) { %>
              Large
            <% } %>
          </div>
        <% } else { %>
          <div class="h6">Fail</div>
        <% } %>
      </div>
    <% }) %>
  <% }) %>
</div>


<div class="flex flex-wrap py3">
  <% colors.forEach(function(color) { %>
    <% color.combinations.forEach(function(combo) { %>
      <div class="h6 flex-auto p2" style="color:<%= color.hex %>;background-color:<%= combo.hex %>">
        <div class="h4 bold"><%= combo.contrast.toFixed(2) %></div>
        <div>
          <%= color.hex %>
        </div>
        <% if (combo.accessibility.aaa || combo.accessibility.aa || combo.accessibility.aaLarge) { %>
          <div class="h6 inline-block px1 rounded"
            style="color:<%= combo.hex %>;background-color:<%= color.hex %>">
            <% if (combo.accessibility.aaa) { %>
              AAA
            <% } else if (combo.accessibility.aa) { %>
              AA
            <% } else if (combo.accessibility.aaLarge) { %>
              Large
            <% } %>
          </div>
        <% } else { %>
          <div class="h6">Fail</div>
        <% } %>
      </div>
    <% }) %>
  <% }) %>
</div>


</body>
</html>
